import { Articles, Channel } from '@/types/data';
import { HomeAction } from '@/types/store';
import { channel } from 'diagnostics_channel';
import { sortBy } from 'lodash';

type HomeState = {
  // 我的频道
  channels: Channel[];
  // 剩余频道（推荐频道）
  restChannels: Channel[];
  // 频道对应文章列表
  channelArticles: {
    [key in number]: Articles;
  };
  // 选中频道id
  channelActiveKey: number;
};

const initialState: HomeState = {
  // 我的频道
  channels: [],
  // 剩余频道（推荐频道）
  restChannels: [],
  // 频道对应文章列表
  channelArticles: {},
  // 选中频道id
  channelActiveKey: 0,
};

export const home = (state = initialState, action: HomeAction): HomeState => {
  // 处理我的频道数据
  if (action.type === '/home/getChannels') {
    return {
      ...state,
      channels: action.payload,
    };
  }
  // 处理剩余频道数据
  if (action.type === '/home/getRestChannel') {
    return {
      ...state,
      restChannels: action.payload,
    };
  }
  // 更新频道的选中状态
  if (action.type === 'home/toggleChannel') {
    return {
      ...state,
      channelActiveKey: action.payload,
    };
  }
  // 删除我的频道数据
  if (action.type === 'home/delMyChannel') {
    return {
      ...state,
      // 删除我的频道
      channels: state.channels.filter((item) => item.id !== action.payload.id),
      // 添加到剩余频道
      // restChannels: [...state.restChannels, action.payload],
      // a-b升序，b-a降序
      // restChannels: [...state.restChannels, action.payload].sort(
      //   (a, b) => a.id - b.id
      // ),
      // 用第三方库排序
      restChannels: sortBy([...state.restChannels, action.payload], 'id'),
    };
  }
  // 添加频道数据
  if (action.type === 'home/addChannel') {
    return {
      ...state,
      channels: [...state.channels, action.payload].sort((a, b) => a.id - b.id),
      restChannels: state.restChannels.filter(
        (item) => item.id !== action.payload.id
      ),
    };
  }

  // 添加不同频道的文章列表
  if (action.type === 'home/getArticleList') {
    /*
      所有频道的文章列表数据：channelArticles
      { 
        1: {
          pre_timestamp: '1552266004750',
          results: [...]
        },
        2: {
          pre_timestamp: '1552266006730',
          results: [...]
        },
        ...
      }
      某次请求的数据
      action.payload => 
      {
        // 频道id
        channelId: 1, 
        articles: {
          // 时间戳
          pre_timestamp: '1552266004750',
          // 文章列表数据
          results: [...]
        }
      }
    */
    // 新来的数据
    const channelId = action.payload.channelId;
    const newArticles = action.payload.articles;
    // 当前的文章列表
    // 在当前的(已有的)的结果中追加后续请求到的数据
    // 因为第一次请求某个频道数据时，对应的 results[],还没有初始化，所以需要初始化一个空数据
    // 后续才可以直接使用 [...]，否则会报错。
    // 之所以不在initialState中初始化，是因为不知道用户第一次会请求哪个频道文章列表。
    // 如果在initialState中初始化，需要每个频道都初始化一次，有些繁琐。
    // 在当前的文章列表中追加
    const currentArticles = state.channelArticles[channelId] || {
      pre_timestamp: Date.now(),
      results: [],
    };

    return {
      // 展开整个HomeState对象
      ...state,
      channelArticles: {
        // 先把原来的列表新建
        ...state.channelArticles,
        // 在原来的基础上，追加这次请求到数据
        [channelId]: {
          pre_timestamp: newArticles.pre_timestamp,
          results: [...currentArticles.results, ...newArticles.results],
        },
      },
    };
  }

  return state;
};
